<template>
	<view>
		<uni-nav-bar fixed="true" color="#FFF" backgroundColor="#F55128" :title="`我的购物车`" statusBar="true"
			:border="false" left-icon="back" @clickLeft="$tab.back()" />

		<view class="mt-24 bg-FFF round-16 py-36 px-32" v-for="(item,index) in list" :key="index">
			<view class="flex items-center">
				<image
					:src="`https://file.fulewanjia.com/fulewanjia/profile/appImg/index/${item.checked == 1 ? selectImg : noSelectImg}.png`"
					mode="" class="image-40" @click="handleOperate(1,item.checked,item)"></image>
				<image :src="globalConfig.imagePrefix + item.mallStore.logo" mode="" class="image-40 ml-24"
					v-if="item.mallStore.logo"></image>
				<view class="ml-12 text-28 font-700">
					{{item.mallStore.name}}
				</view>
				<image src="https://file.fulewanjia.com/fulewanjia/profile/appImg/index/icon_chakanxiangqing@2x.png"
					mode="" class="image-40 ml-12"></image>
			</view>
			<view class="flex items-center justify-between mt-28" v-for="(i,j) in item.mallCartList" :key="i.id">
				<image
					:src="`https://file.fulewanjia.com/fulewanjia/profile/appImg/index/${i.checked == 1 ? selectImg : noSelectImg}.png`"
					mode="" class="image-40" @click="handleOperate(2,i.checked,i.spuId)"></image>
				<!-- 有规格 -->
				<view class="flex items-center" v-if="i.skuInfo">
					<image :src="globalConfig.imagePrefix + i.skuInfo.icons" mode="" class="shopImg round-8"></image>
					<view class="info ml-20">
						<view class="text-28">
							{{i.spuInfo.name}}
						</view>
						<view class="text-24 text-gray mt-28 flex items-center">
							<view class="">
								所选规格:
							</view>
							<view class="flex items-center ">
								<view class="text-gray text-20" v-if="i.skuInfo.mallSkuSpecs.length > 0">
									{{i.skuInfo.mallSkuSpecs[0].specName}}:{{i.skuInfo.mallSkuSpecs[0].specValue}}
								</view>
								<view class="text-gray text-20 ml-12" v-if="i.skuInfo.mallSkuSpecs.length > 1">
									{{i.skuInfo.mallSkuSpecs[1].specName}}:{{i.skuInfo.mallSkuSpecs[1].specValue}}
								</view>
							</view>
						</view>
						<view class="sprice mt-28">
							￥{{i.skuInfo.price}}
						</view>
					</view>
				</view>

				<!-- 没规格 -->
				<view class="flex items-center" v-else>
					<image :src="globalConfig.imagePrefix + i.spuInfo.cover" mode="" class="shopImg round-8"></image>
					<view class="info ml-20">
						<view class="text-28">
							{{i.spuInfo.name}}
						</view>
						<view class="sprice mt-28">
							￥{{i.spuInfo.price}}
						</view>
					</view>
				</view>

				<view class="">
					x{{i.num}}
				</view>
			</view>
		</view>


		<view class="bottom pl-20 bg-FFF flex items-center justify-between iphoneX">
			<view class="flex items-center">
				<view class="flex items-center" @click="handleOperate(3,allSelect)">
					<image
						:src="`https://file.fulewanjia.com/fulewanjia/profile/appImg/index/${allSelect == 1 ? selectImg : noSelectImg}.png`"
						mode="" class="image-40"></image>
					<view class="text-32 ml-24">
						全选
					</view>
				</view>

				<view class="sprice ml-24" @click="remove">
					删除
				</view>
			</view>

			<view class="flex items-center">
				<view class="">
					合计： <text class="sprice">￥{{price}}</text>
				</view>
				<view class="settlement text-center text-FFF ml-16" @click="getOrder">
					去结算({{settlementNum}})
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				allSelect: false,
				noSelectImg: 'icon_weixuanzhong',
				selectImg: 'icon_xuanzhong',
				price: 0,
				settlementNum: 0,
				globalConfig: getApp().globalData.config,
				storeId: null
			};
		},
		onLoad(e) {
			this.storeId = e.storeId
		},
		onShow() {
			this.getData()
		},
		methods: {
			// 去结算
			async getOrder() {
				var that = this
				let arr = []
				this.list.forEach((a) => {
					a.mallCartList.forEach((b) => {
						if (b.checked == 1) {
							let params = {
								num: b.num,
								spuId: b.spuId
							}

							if (b.skuId != null) {
								params.skuId = b.skuId
							}

							if (a.mallStore.id != null) {
								params.storeId = a.mallStore.id
							}

							arr.push(params)
						}
					})
				})

				const res = await this.$Api.index.addOrder({
					orderSpuList: arr
				})

				this.$tab.nav(`/pages/mine/order/orderDetail?id=${res.msg}`)

			},
			remove() {
				let removelist = []
				this.list.forEach((i) => {
					i.mallCartList.forEach((b) => {
						if (b.checked == 1) {
							removelist.push(b.id)
						}
					})
				})
				if (removelist.length > 0) {
					this.$modal.confirm('是否删除当前选中的商品?').then(async con => {
						if (con) {
							const res = await this.$Api.index.cartRemove({
								ids: removelist.join(',')
							})
							uni.$u.toast('删除成功');
							this.getData()
						}
					})
				}
			},
			/**
			 * @param {Object} type 判断是那种类型的选中 1 店铺 2 店铺商品 3 全选
			 * @param {Object} checked 1 选中 
			 * @param {Object} id 商品id 或店铺id
			 */
			async handleOperate(type, checked, id) {
				switch (type) {
					case 1:
						let params = {
							checked: checked == 1 ? 0 : 1,
						}
						if (id.mallStore.id != null) {
							params.storeId = id.mallStore.id
						} else {
							params.columnType = id.mallCartList[0].columnType
						}
						const shore = await this.$Api.index.cartEdit(params)
						break
					case 2:
						const product = await this.$Api.index.cartEdit({
							checked: checked == 1 ? 0 : 1,
							spuId: id,
						})
						break
					case 3:
						const all = await this.$Api.index.cartEdit({
							checked: checked ? 0 : 1,
						})
						break
				}
				this.getData()
			},

			async getData() {
				const res = await this.$Api.index.cartList({
					storeId: this.storeId
				})
				console.log('购物车', res)

				this.list = res.data

				this.handleAllShop()

			},
			// 判断店铺内的商品是否被全选的方法
			handleAllShop() {
				let storeNum = 0
				let settlementNum = 0
				let price = 0
				this.list.forEach(item => {
					// 每个店铺初始化选中数量
					let temNum = 0;
					item.mallCartList.forEach(i => {
						if (i.checked == 1) {
							temNum++
							settlementNum++
							if (i.skuInfo) {
								price = price += (i.skuInfo.price * i.num)
							} else {
								price = price += (i.spuInfo.price * i.num)
							}
						}
					})

					if (temNum == item.mallCartList.length) {
						item.checked = 1
						storeNum++
					}
				})

				this.settlementNum = settlementNum
				this.price = price

				if (storeNum == this.list.length) {
					this.allSelect = true
				} else {
					this.allSelect = false
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #F8F8F8;
	}
</style>

<style lang="scss">
	.shopImg {
		width: 192rpx;
		height: 192rpx;
	}

	.info {
		width: 370rpx;
	}

	.bottom {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 99999;
	}

	.settlement {
		width: 220rpx;
		height: 84rpx;
		background: #333333;
		line-height: 84rpx;
	}
</style>